<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02_模板语法</title>
  </head>
  <body>
    <!--
      1. 模板的理解:
        动态的html页面
        包含了一些JS语法代码
          双大括号表达式
          指令(以v-开头的自定义标签属性)
      2. 双大括号表达式
        语法: {{exp}} 或 {{{exp}}}
        功能: 向页面输出数据
        可以调用对象的方法
      3. 指令一: 强制数据绑定
        功能: 指定变化的属性值
        完整写法:
          v-bind:xxx='yyy'  //yyy会作为表达式解析执行
        简洁写法:
          :xxx='yyy'
      4. 指令二: 绑定事件监听
        功能: 绑定指定事件名的回调函数
        完整写法:
          v-on:click='xxx'
        简洁写法:
          @click='xxx'
      -->
    <div id="app">
      <h2>1. 双大括号表达式</h2>
      <p>{{name}}</p>
      <p>{{flag ? 111 : 222}}</p>
      <!-- <p>{{ if (flag) { return 333 } }}</p> -->

      <h2>2. 指令一: 强制数据绑定</h2>
      <!-- 原生js写法 -->
      <input type="text" value="name">

      <input type="text" v-bind:value="name">
      <!-- v-bind的简写 -->
      <input type="text" :value="name">

      <!-- <input type="text" v-model="name"> -->

      <h2>3. 指令二: 绑定事件监听</h2>

      <button v-on:click="handleClick">按钮1</button>
      <button v-on:mousemove="handleClick">按钮2</button>
      <!-- v-on简写 -->
      <button @click="handleClick">按钮3</button>
      
      <input type="text" @input="handleInput">
      <input type="text" @change="handleChange">

    </div>
    <script src="../js/vue.js"></script>
    <script>
      /*
        指令：
          1. v-model 用于双向数据绑定
          2. v-bind 强制数据绑定（单向数据绑定）
            v-bind:属性名="JS表达式"
            简写：  :属性名="JS表达式"
            作用： 给标签属性绑定某个动态数据
            扩展: 
              将来常用于父子组件通信，props方式传递数据

          3. v-on 用于绑定DOM事件
            v-on:事件名="回调函数"  
            事件名全是小写
            回调函数会定义再methods中
            简写：@事件名="回调函数"  
            作用：用来绑定DOM事件
      */

      new Vue({
        el: '#app',
        data: { // 定义数据（非函数数据）
          name: 'peihua',
          flag: true
        },
        methods: { // 定义数据（函数数据）
          // 定义函数一般都是普通函数，不会定义成箭头函数
          handleClick(event) {
            console.log(event);
            console.log(this); // Vue的实例对象vm
          },
          handleInput(event) {
            console.log('input', event.target.value);
          },
          handleChange(event) {
            console.log('change', event.target.value);
          }
        }
      })

    </script>
  </body>
</html>
